// components/Header.jsx
import React, { Component } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Layout, Button, Modal, message } from 'antd';
import { createDeletUserInfoAction } from '../../../redux/action_craetors/login_action'
import './css/header.less';
import PubSub from 'pubsub-js';
import withRouterNavigate from './css/withRouterNavigate.js'; // 注意路径
import logo from '../../../static/login/logo2.png';

import { meshLog, SPRemove, SPGet, SPSet } from "../../../config";

const { confirm } = Modal;

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            menuOpen: false,
            useName: []
        };
        this.toggleMenu = this.toggleMenu.bind(this);
    }

    componentDidMount() {
        let useName = SPGet('useName')
        meshLog('usename', useName);
        console.log(12312323)
        this.setState({
            useName: useName,
        })
    }
    toggleMenu() {
        this.setState(prevState => ({
            menuOpen: !prevState.menuOpen
        }));
    }

    //点击退出登录的回调函数
    logOut = () => {
        confirm({
            title: 'LOGOUT',
            content: 'Logging out will clear local data. Are you sure?',
            cancelText: 'Cancel',
            okText: 'Yes,Sure',
            onOk: () => {
                // this.props.deletUser()
                this.props.navigate('/login');
                PubSub.publish('deletUser', '')
            },
            onCancel() { },
        });
        //退出的，调用redux
    }

    render() {
        const { menuOpen } = this.state;

        return (
            <div className='header'>
                <div className='logo'>
                    <img src={logo} alt="logo" className="logo" />
                </div>
                <div className='userSection' onClick={this.toggleMenu}>
                    <div className='avatar'>{this.state.useName}</div>
                    <DownOutlined style={{ fontSize: 14 }} />
                    {menuOpen && (
                        <div className='dropdown'>
                            <div className='item'>Information</div>
                            <div className='item' onClick={this.logOut} >logOut</div>
                        </div>
                    )}
                </div>
            </div>
        );
    }
}
export default withRouterNavigate(Header)
